<template>
    <div class="select-picker">
        <el-select v-model="selectValue" placeholder="请选择" size="small">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="js">
import { ref, watch, onMounted } from 'vue'
import { fetchCardFilter } from "@/api/global"

const emits = defineEmits(["handleFieldChange"])

const props = defineProps({
    data: {
        default: () => ({
            cardId: "", // 卡片id
            type: "", // 组件类型
            url: "", // 组件数据接口地址
            field: "" // 传给后端的key 属性名称
        })
    }
})

const selectOptions = ref([])

const selectValue = ref()

onMounted(async () => {
    // 发送请求
    // const res = await fetchCardFilter(props.data.url)
    selectOptions.value = [
        {
            value: '1',
            label: 'Option1',
        },
        {
            value: '2',
            label: 'Option2',
        },
        {
            value: '3',
            label: 'Option3',
        },
        {
            value: '4',
            label: 'Option4',
        },
        {
            value: '5',
            label: 'Option5',
        },
    ]

    selectValue.value = selectOptions.value[0].value
})

// 监听数据有值 并且发生变化触发
watch(() => selectValue.value, (newVal) => {
    if (newVal) {
        emits("handleFieldChange", props.data.field, newVal)
    }
}, { immediate: true })
</script>
<style scoped lang="scss">
.select-picker {
    width: vw(250);

    :deep(.el-select .el-select__wrapper .is-hovering) {
        box-shadow: none !important;
    }

    :deep(.el-select .el-select__wrapper) {
        color: #bccbcc;
        box-shadow: none;
        background: rgb(18, 68, 87);
    }
}
</style>